<template>
  <tr>
    <td><input type="checkbox" v-model="cart.checked" /></td>
    <td>{{ cart.name }}</td>
    <td>{{ cart.price }}</td>
    <td>
      <button @click.prevent="redGoods">-</button>{{ cart.num
      }}<button @click.prevent="addGoods">+</button>
    </td>
    <td>{{ total }}</td>
    <td><button @click.prevent="del">删除</button></td>
  </tr>
</template>

<script>
export default {
  props: ["cart", "index"],
  computed: {
    total() {
      return this.cart.price * this.cart.num;
    },
  },
  data() {
    return {};
  },
  methods: {
    addGoods() {
      this.$emit("addAction", this.index);
    },
    redGoods() {
      this.$emit("redAction", this.index);
    },
    del() {
      this.$emit("removeAction", this.index);
    },
  },
  watch: {
    total: {
      handler(newVal, oldVal) {
        this.$emit("totalChangeAction", newVal || oldVal, this.index);
      },
      immediate: true,
    },
  },
};
</script>

<style>
</style>